import React, { Component } from "react";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

import { WebView } from "react-native-webview";

class TestPage extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {};
  }

  render() {
    // 需要注入的JavaScript代码，隐藏广告元素
    const hideAdsScript = `
          document.getElementById('filter').style.backgroundColor= 'yellow'

        function hideAds() {
          // 隐藏所有 ins 标签的元素
          var adElements = document.querySelectorAll("ins");
          adElements.forEach(item => {
            item.style.display = "none";
          });

          // 隐藏 id 为 player-app 的元素
          var playerAppElement = document.getElementById("player-app");
          if (playerAppElement) {
            playerAppElement.style.display = "none";
          }

          // 隐藏 id 为 mys-content 的元素
          var adAppElement = document.getElementById("mys-content");
          if (adAppElement) {
            adAppElement.style.display = "none";
          }

          // 隐藏 class 为 adsense-auto wndt-ads 的元素
          var adsenseAutoElements = document.querySelectorAll(".adsense-auto.wndt-ads");
          adsenseAutoElements.forEach(function(element) {
            element.style.display = "none";
          });
        }

        // 初次加载完成后隐藏广告并滚动页面
        document.addEventListener("DOMContentLoaded", function() {
          hideAds();
          window.scrollTo(0, 600); // 滚动到页面下方600像素位置
          document.getElementById('filter').style.backgroundColor= 'red'

        });

        // 每隔一分钟隐藏一次广告元素
        setInterval(hideAds, 30000);
  `;
    const hideAdsScript1 = `
      function hideAds() {
        document.getElementById('filter').style.backgroundColor= 'red'

        var adElements = document.querySelectorAll("ins");
        adElements.forEach(item => {
          item.style.display = "none";
        });

        // 隐藏id为player-app的元素
        var playerAppElement = document.getElementById("player-app");
        if (playerAppElement) {
          playerAppElement.style.display = "none";
        }

        // 隐藏id为mys-content的元素
        var adAppElement = document.getElementById("mys-content");
        if (adAppElement) {
          adAppElement.style.display = "none";
        }

        // 隐藏class为adsense-auto wndt-ads的元素
        var adsenseAutoElements = document.querySelectorAll(".adsense-auto.wndt-ads");
        adsenseAutoElements.forEach(function(element) {
          element.style.display = "none";
        });
      }
      
      document.addEventListener("DOMContentLoaded", function() {
        hideAds();
        window.scrollTo(0, 600);
        // setInterval(hideAds, 30000); // 每隔1分钟执行一次hideAds函数
      });
      setInterval(function(){
        hideAds();
        window.scrollTo(0, 600);
      }, 10000);

    `;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <View style={styles.webViewContainer}>
            <WebView
              style={{ flex: 1 }}
              source={{
                uri: "https://tingfm.com/region/bj?lang=zh_CN",
              }}
              javaScriptEnabled={true}
              domStorageEnabled={true}
              startInLoadingState={true}
              scalesPageToFit={true}
              injectedJavaScript={hideAdsScript} // 注入自定义JavaScript代码
              onError={(error) => console.error("WebView error: ", error)}
              onHttpError={(syntheticEvent) => {
                const { nativeEvent } = syntheticEvent;
                console.warn(
                  "WebView received error status code: ",
                  nativeEvent.statusCode
                );
              }}
            />
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webViewContainer: {
    flex: 1,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
  },
  otherContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
  },
  button: {
    backgroundColor: "#007BFF",
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
  },
});

export default TestPage;
